<!--
 * @Author: xinqiao lxq1990.0716@qq.com
 * @Date: 2024-07-11 22:40:38
 * @LastEditors: xinqiao lxq1990.0716@qq.com
 * @LastEditTime: 2024-07-11 22:41:22
 * @FilePath: \web-components-demo\src\views\slider\demo08.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="demo">
    <div class="demo-title">带标签的滑块</div>
    <div class="demo-content">
      <h4>included=true</h4>
      <Slider v-model:value="value1" :marks="marks">
        <template #mark="{ label, point }">
          <template v-if="point === 100">
            <strong>{{ label }}</strong>
          </template>
          <template v-else>{{ label }}</template>
        </template>
      </Slider>
      <Slider v-model:value="value2" range :marks="marks">
        <template #mark="{ label, point }">
          <template v-if="point === 100">
            <strong>{{ label }}</strong>
          </template>
          <template v-else>{{ label }}</template>
        </template>
      </Slider>
      <h4>included=false</h4>
      <Slider v-model:value="value3" :marks="marks" :included="false">
        <template #mark="{ label, point }">
          <template v-if="point === 100">
            <strong>{{ label }}</strong>
          </template>
          <template v-else>{{ label }}</template>
        </template>
      </Slider>
      <h4>marks & step</h4>
      <Slider v-model:value="value4" :marks="marks" :step="10">
        <template #mark="{ label, point }">
          <template v-if="point === 100">
            <strong>{{ label }}</strong>
          </template>
          <template v-else>{{ label }}</template>
        </template>
      </Slider>
      <h4>step=null</h4>
      <Slider v-model:value="value5" :marks="marks" :step="null">
        <template #mark="{ label, point }">
          <template v-if="point === 100">
            <strong>{{ label }}</strong>
          </template>
          <template v-else>{{ label }}</template>
        </template>
      </Slider>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import Slider from '@sscd/slider';
  const value1 = ref<number>(37);
  const value2 = ref<[number, number]>([26, 37]);
  const value3 = ref<number>(37);
  const value4 = ref<number>(37);
  const value5 = ref<number>(37);
  const marks = ref<Record<number, any>>({
    0: '0°C',
    26: '26°C',
    37: '37°C',
    100: {
      style: {
        color: '#f50',
      },
      label: '100°C',
    },
  });
</script>

<style lang="less" scoped></style>
